<template>
	<view>
		<view>
			<u-cell-group>
				<u-cell-item :arrow="false">
					<view class="u-flex-1 address">
						<view class="u-font-18 u-p-b-20 address-title">{{userInfo.province}} - {{userInfo.city}} -
							{{userInfo.county}}
						</view>
						<view class="u-font-14 u-tips-color">{{userInfo.name}}: {{userInfo.phone}}</view>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>


		<view class="main">
			<view class="cartGoods u-flex u-p-15" v-for="goods in goodsList" :key="goods.id">
				<view class="goodsInfo u-p-10">
					<view @tap='jump(goods.goods_id)'>
						<u-image border-radius="15" width="200rpx" height="200rpx" :src="goods.goods.cover_url">
						</u-image>
					</view>
				</view>
				<view class="goodsBaseInfo u-col-top u-p-10">
					<view @tap='jump(goods.goods_id)'>
						<text class="title u-p-l-10 u-font-32">{{goods.goods.title}}</text>
					</view>
					<view class="priceNum u-flex u-p-t-80">
						<text class="price u-font-34">￥{{goods.goods.price}}</text>
						<text class="sales u-font-34">
							<u-icon size="20" name="close"></u-icon> {{goods.num}}
						</text>
					</view>
				</view>
			</view>
		</view>

		<view class="navigation"
			style="position: fixed;bottom: 0;width: 100%;display: flex;justify-content: space-between;">
			<view class="u-flex u-flex-7 u-row-around">
				<view>
					<text class="title">共</text>
					<text class="price">{{goodsList.length}}</text>
					<text class="title">本</text>
				</view>
				<view>
					<text class="title">合计:</text>
					<text class="price">￥{{totalPrice}}</text>
				</view>
			</view>
			<view class="u-flex-5">
				<view class="buy btn u-line-1" @tap="showModal">提交订单并支付</view>
			</view>
		</view>



		<!-- 模态框 -->
		<u-modal class="modal" title="支付" v-model="show" @confirm="confirm">
			<img :src="odersUrl"></img>
		</u-modal>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				userInfo: {},
				show: false,
				address_id: '',
				odersUrl:''
			}
		},
		onLoad() {
			if (this.vuex_token) {
				this.getCartGoods()
				this.getAddressData()
			}
		},
		computed: {
			totalPrice() {
				return this.goodsList.reduce((pre, carts) => {
					return parseInt(pre) + parseInt(carts.goods.price) * carts.num
				}, 0)
			}
		},
		methods: {
			async getAddressData() {
				const address = this.$route.query.address
				const res = await this.$u.api.addressInfo(address)
				if(res.statusCode == 404){
					this.$u.toast('地址已被删除,替换为默认地址')
					const res = await this.$u.api.addressList()
					if(res.data[0]){
						for (var i = 0; i < res.data.length; i++) {
							if (res.data[i].is_default == 1) {
								this.userInfo = res.data[i]
								this.address_id = res.data[i].id
							}
						}
					}else{
						this.$u.toast('请填写收货地址')
					}
				}else{
					this.userInfo = res
					this.address_id = res.id
				}
				
			},
			// 商品详情跳转
			jump(id) {
				this.$u.route({
					url: '/pages/goods/show',
					params: {
						id
					}
				})
			},
			// 获取订单详情
			async getCartGoods() {
				const id = this.$route.query.id
				const res = await this.$u.api.ordersListInfo(id)
				this.goodsList = res.orderDetails.data
			},
			// 显示模态框
			async showModal() {
				const res = await this.$u.api.sendOrders(this.address_id)
				// console.log(res)
				if(res){
					const order = res.id
					this.show = true
					const odersRes = await this.$u.api.odersPay(order)
					// console.log(odersRes)
					this.odersUrl = odersRes.qr_code_url
					let timer = setInterval(async ()=>{
						const res = await this.$u.api.odersStatus(order)
						console.log(res)
						if(res == 1){
							clearInterval(timer)
						}
					},1500)
				}
			},
			// 扫完码后跳转
			confirm(){
				this.$u.route({
					type:'switchTab',
					url:'/pages/center/order'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		text-align: left;
		line-height: 40rpx;
		color: #333;

		.address-title {
			font-weight: bold;
		}
	}

	.main {
		padding-bottom: 100rpx;

		.priceNum {
			width: 450rpx;
			display: flex;
			justify-content: space-between;
		}

		.price {
			margin-left: 10rpx;
			color: #ed3f14;
			font-weight: bold;
			font-size: 40rpx;
		}

		.sales {
			font-size: 30rpx;
		}
	}

	.navigation {
		display: flex;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 10rpx 0;

		.buy {
			text-align: center;
			line-height: 70rpx;
			padding: 0 30rpx;
			border-radius: 40rpx;
			color: #ffffff;
			background-color: #ed3f14;
			margin-right: 60rpx;
		}

		.price {
			margin-left: 10rpx;
			margin-right: 10rpx;
			color: #ed3f14;
			font-weight: bold;
			font-size: 30rpx;
		}
	}
	
	.modal{
		text-align: center;
	}
</style>
